<template>
    <div class="youke">
        <Navs></Navs>
        <Main>
            <div class="header-box">
                <van-cell>
                    <van-row>
                        <van-col span="8">累计矿点：{{homes.ljpd}}</van-col>
                        <van-col span="8">奖励：{{homes.jl==null?'0':homes.jl}}</van-col>
                        <van-col span="8" style="text-align: right">
                            <span @click="$router.push({path:'/game/record'})">记录</span>
                            <span>|</span>
                            <span @click="$router.push({path:'/game/rule'})">规则</span>
                        </van-col>
                    </van-row>
                </van-cell>
            </div>
            <div class="team-box">
                <van-cell title="我的好友" is-link to="/team/index" :value="homes.team"/>
                <van-cell title="节点收益记录" is-link to="/teamer/index" :value="homes.group"/>
            </div>
            <!-- <div class="search-box">
              <div class="content-box">
                <div class="search-title">魔方排单</div>
                <div>
                  <van-search label="搜索 |" placeholder="请输入搜索关键词" show-action>
                    <i slot="left-icon"></i>
                    <div slot="action">
                      <van-icon name="search"/>
                    </div>
                  </van-search>
                </div>
              </div>
            </div>-->
            <div class="recommend-box" v-if="recommendShow && homes.tjdw">
                <div class="recommend-content">
                    <div class="recommend-title">推荐矿点</div>
                    <div class="recommend-content-btn" :class="{justify:widths}" id="recommend">
                        <!-- <div style="overflow:auto"> -->
                        <div v-for="item in homes.tjdw" :key="item.key" @click="createOrder(item)">{{item}}</div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            <div class="game-box">
                <div class="game-header-box">
                    <van-row>
                        <van-col span="3">
                            <van-icon class-prefix="iconfont iconshujumofang" size="2em"></van-icon>
                        </van-col>
                        <van-col span="13">当前矿点模型：{{treesdata.id}}号矿点</van-col>
                        <van-col span="8">
                            <div class="mark">
                                <div class="stop bg-red"></div>
                                <p>被占</p>
                                <div class="stop bg-blue"></div>
                                <p>空位</p>
                            </div>
                        </van-col>
                    </van-row>
                </div>
                <div class="game-content-box">
                    <!-- <node-tree></node-tree> -->
                    <trees
                            :data="treesdata"
                            :horizontal="horizontal"
                            :collapsable="collapsable"
                            :label-class-name="labelClassName"
                            :render-content="renderContent"
                            :point="true"
                            @on-expand="onExpand"
                            @on-node-click="onNodeClick"
                            :props="propsOption"
                            ref="hammers"
                    ></trees>
                </div>
                <!--  -->
            </div>
            <div class="my-point-box">
                <van-cell>
                    <van-row>
                        <van-col span="14">我的矿点：{{homes.wddw}}</van-col>
                        <van-col span="5" style="text-align: center">
                            <van-button size="mini" to="/game/order">我的</van-button>
                        </van-col>
                        <van-col span="5" style="text-align: right">
                            <van-button size="mini" type="danger" @click="getpd">矿点</van-button>
                        </van-col>
                    </van-row>
                </van-cell>
            </div>
        </Main>

        <van-popup v-model="payShow" position="bottom" class="van-popups">
            <div class="pay-popup">
                <div class="pay-head">
                    <div class="pay-head_title">支付</div>
                    <div class="pay-headt_close" @click="payShow=false">
                        <van-icon name="close"/>
                    </div>
                </div>
                <div class="pay-content">
                    <van-cell-group>
                        <van-field
                                :value="`${$store.getters.zhichans.ajf}枚`"
                                label="剩余资产"
                                placeholder
                                readonly
                                class="pay-input"
                        />

                        <van-field
                                :value="`${100}枚`"
                                readonly
                                type="text"
                                label="需支付"
                                placeholder
                                class="pay-input"
                        />
                    </van-cell-group>
                    <input v-model="password" type="password" class="pay-password" placeholder="请输入安全密码">
                    <van-button
                            class="pay-btn"
                            type="danger"
                            :disabled="password==''"
                            size="large"
                            @click="doPay"
                    >确认支付
                    </van-button>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="payloading" class="van-popups">
            <div class="payload">
                <div>
                    <img src="@/assets/other/f-a.gif" alt srcset>
                </div>
                <div>{{matchMsg}}</div>
            </div>
        </van-popup>
    </div>
</template>

<script type="text/ecmascript-6">
    import trees from "@/components/common/trees";

    let {keys, values, entries} = Object;
    import {games} from "@/api";

    export default {
        //接收父级传递的参数
        props: [],
        //监听数据变化
        watch: {},
        data() {
            return {
                show: false,
                loading: false,
                payShow: false,
                payloading: false,
                matchMsg: "匹配中",
                treesdata: {},
                horizontal: false,
                collapsable: false,
                expandAll: false,
                password: "",
                paypoins: "",
                homes: {
                    ljpd: 0, //累计排单
                    jl: 0, //奖励
                    team: 0, //团队人数（推荐人数）
                    wddw: 0, //我的点位数量
                    tjdw: [], //推荐点位
                    zypd: 0, //自由排单（目前注释）,
                    group: 0 //团长记录数
                },
                propsOption: {
                    label: "label",
                    expand: "expand",
                    children: "zj",
                    check: "uid",
                    id: "id"
                },
                recommendShow:false
            };
        },
        //实例初始化之前触发事件
        beforeCreate() {
        },
        //实例化之后触发事件
        created() {
            this.getlist();
        },
        //实时监控data参数数据变化
        computed: {
            widths() {
                return this.homes.tjdw.toString().length <= 25
            }
        },
        //模板组件
        components: {
            trees
        },
        //执行方法
        methods: {
            getlist() {
                games.dwmx().then(res => {
                    if (res.code == 1000) {
                        this.treesdata = res.result;
                        this.treesdata.one=0
                    }
                });
            },
            getchange(data) {
                for (let i of data.zj.values()) {
                    i.uid = Boolean(Number(i.uid));
                    for (let j of i.zj.values()) {
                        j.uid = Boolean(Number(j.uid));
                    }
                }
                this.treesdata = data;
                // console.log(this.treesdata)
            },
            renderContent(h, data) {
                return "";
            },
            labelClassName(h, data) {
                //   console.log(h, data);

                return;
            },
            onExpand(data) {
                if ("expand" in data) {
                    data.expand = !data.expand;

                    if (!data.expand && data.children) {
                        this.collapse(data.children);
                    }
                } else {
                    this.$set(data, "expand", true);
                }
            },
            onNodeClick(e, data, id, check) {
                // console.log(id);
                // console.log(check);
                if (check != 0) return;
                this.createOrder(id);
            },
            collapse(list) {
                var _this = this;
                list.forEach(child => {
                    if (child.expand) {
                        child.expand = false;
                    }

                    child.children && _this.collapse(child.children);
                });
            },
            expandChange() {
                this.toggleExpand(this.data, this.expandAll);
            },
            toggleExpand(data, val) {
                var _this = this;
                if (Array.isArray(data)) {
                    data.forEach(item => {
                        _this.$set(item, "expand", val);
                        if (item.children) {
                            _this.toggleExpand(item.children, val);
                        }
                    });
                } else {
                    this.$set(data, "expand", val);
                    if (data.children) {
                        _this.toggleExpand(data.children, val);
                    }
                }
            },
            gethomes() {
                games.home().then(res => {
                    if (res.code == 1000) {
                        this.homes = Object.assign(this.homes, res.result);
                        if(this.homes.tjdw.length > 0) this.recommendShow = true;
                    }
                });
            },
            getpd() {
                games.pd().then(res => {
                    if (res.code == 1000) {
                        this.createOrder(res.result);
                    }
                });
            },
            doPay() {
                // passwo zfmm
                games
                    .goumai({dwid: this.paypoins, passwo: this.password})
                    .then(data => {
                        if (data.code == 1000) {
                            // this.$router.push("/game/order");
                            this.payloading = true;
                            this.payShow = false;
                            setTimeout(() => {
                                this.matchMsg = "匹配成功";
                                this.$store.dispatch("addzhichan")
                                setTimeout(() => {
                                    this.$router.push(`/game/point?id=${this.paypoins}&status=0`);

                                }, 800);
                            }, 1000);
                        }
                    });
            },
            createOrder(id) {
                this.password = "";
                this.$Dialog
                    .confirm({
                        title: `当前矿点${id}`,
                        message: `将扣除100枚资产完成矿点匹配，确定匹配矿点吗？`
                    })
                    .then(() => {
                        this.payShow = true;
                        this.paypoins = id;

                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        },
        mounted() {
            this.$store.dispatch("addzhichan")
            this.gethomes();
        }
        //路由退出时候调用
        //beforeRouteLeave(to, from, next){next()}
    };
</script>

<style scoped lang="less">
    .match {
        width: 16rem;
        height: 11rem;
        border-radius: 0.2rem;

        .loading-box {
            width: 7rem;
            margin: 1rem auto;
            text-align: center;

            img {
                width: 7rem;
            }
        }
    }

    .pay-header {
        font-size: 16px;
        height: 3rem;
        left: 0px;

        span {
            border-left: 2px solid blue;
            padding-left: 4px;
        }
    }

    .pay-header:not(:last-child)::after {
        left: 0px;
    }

    .header-box {
        background-color: #ffffff;
    }

    .team-box {
        margin-top: 0.4rem;
    }

    .search-box {
        background-color: #dc3829;
        margin-top: 0.4rem;
        padding: 0.2rem 0;

        .content-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.5rem;

            .van-search {
                padding: 0;
            }

            .search-title {
                color: #fff;
                width: 5rem;
            }

            .van-search__action {
                background-color: #dc3829;

                .van-icon-search {
                    color: #ffffff;
                    font-size: 1.5rem;
                    vertical-align: middle;
                }
            }
        }
    }

    .recommend-box {
        background-color: #ffffff;
        padding: 0.5rem;

        .recommend-content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .recommend-content-btn {
                display: flex;
                margin-left: 0.5rem;
                overflow: auto;
                flex: 6;

                &.justify {
                    justify-content: flex-end;
                }

                div {
                    display: block;
                    margin-right: 0.4rem;
                    color: #dc3829;
                    padding: 0.2rem 0.3rem;
                    border: 1px solid #dc3829;
                    border-radius: 0.4rem;
                }
            }
        }
    }

    .game-box {
        background-color: #f2efe6;
        width: 100%;

        .game-header-box {
            border-bottom: 1px solid #afafaf;
            height: 2.5rem;
            line-height: 2.5rem;
            overflow: hidden;

            .van-row {
                width: 96%;
                margin: 0 auto;
            }

            .mark {
                /*bordeR:1px solid red;*/
                display: flex;
                align-items: center;
                height: 2.5rem;
                font-size: 16px;

                .stop {
                    height: 0.6rem;
                    width: 0.6rem;
                }

                .stop:first-child {
                    background-color: #dc3829;
                }

                .stop:last-child {
                    background-color: #4f89fd;
                }

                p {
                    margin-left: 2px;
                    margin-right: 0.5rem;
                }
            }

            .van-icon-stop {
                border: 1px solid red;
                margin-top: 0.5rem;
            }
        }

        .game-content-box {
            height: 15.5rem;
            overflow: auto;
            position: relative;
                display: flex;
                justify-content: center;
        }
    }

    .my-point-box {
        button {
            height: 1.8rem;
            width: 4rem;
            border-radius: 0.2rem;
        }

        .van-cell {
            padding: 5px;
        }
    }

    .bg-red {
        background-color: #dc3829;
    }

    .bg-blue {
        background-color: #4f89fd;
    }

    .van-cell__value {
        color: #000000;
    }

    .pay-popup {
        padding: 20px 0px;

        .pay-head {
            display: flex;
            justify-content: space-between;
            padding: 0 20px 15px;

            .pay-head_title {
                position: relative;

                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 3px;
                    height: 14px;
                    background: #2f78f6;
                    top: 5px;
                    left: -8px;
                }
            }

            .pay-headt_close {
                font-size: 18px;
            }
        }
    }
</style>
<style lang="less">
    .pay-content {
        .pay-input {
            .van-field__control {
                text-align: right;
            }
        }

        .pay-password {
            width: 94%;
            height: 2rem;
            padding: 10px 0px;
            outline: none;
            border: none;
            border-bottom: 2px solid #ededed;
            display: block;
            margin: 0 auto;
            text-align: center;
        }

        .pay-btn {
            width: 94%;
            margin: 1rem auto 0;
            display: block;
        }
    }

    .payload {
        text-align: center;
        width: 20rem;
        border-radius: 8px;
        height: 12rem;
        padding: 1rem 0px;

        img {
            width: 8rem;
            margin-top: 1rem;
        }

        font-weight: bold;
    }

    .van-popups {
        z-index: 10000 !important;
    }
</style>
